<template>
  <header class="header">
    <div class="search">
      <van-nav-bar left-text="登录" fixed>
        <template #title>
          <van-search v-model="value" disabled placeholder="请输入搜索关键词" @click="$router.push('/search')"/>
        </template>
        <template #right>
          <i class="iconfont icon-fenlei"></i>
        </template>
      </van-nav-bar>
    </div>
    <div class="navhas"></div>
    <div class="nav">
      <div class="nav-item">
        <van-tabbar v-model="active" :fixed='type'>
          <van-tabbar-item>今日推荐</van-tabbar-item>
          <van-tabbar-item>最后疯抢</van-tabbar-item>
          <van-tabbar-item>唯品快抢</van-tabbar-item>
          <van-tabbar-item>国际</van-tabbar-item>
          <van-tabbar-item>唯品·奢</van-tabbar-item>
          <van-tabbar-item>美妆</van-tabbar-item>
          <van-tabbar-item>母婴</van-tabbar-item>
          <van-tabbar-item>家电</van-tabbar-item>
          <van-tabbar-item>家居</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
  </header>
</template>

<script>
import Vue from 'vue'
import { Search, NavBar, Tabbar, TabbarItem } from 'vant'

Vue.use(Search)
Vue.use(NavBar)
Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  data () {
    return {
      value: '',
      active: '',
      type: false,
      fixed: true
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.navhas{
  width: 100%;
  height: .32rem;
}
.nav-item{
  height: 0.32rem;
  position: relative;
}
.icon-fenlei{
  font-size: 0.24rem;
}
.van-nav-bar__left{
  font-size: 14px;
}
.van-tabbar{
  height: 0.32rem;
  @include clearfix();
  white-space: nowrap;
  .van-tabbar-item{
    margin-right: 25px;
  }
  .van-tabbar-item:nth-child(1){
    margin-left: 10px;
  }
}
.van-search {
  padding: 5px 12px;
}
</style>
